// 全局变量
var total = listArr.length // 总条数
var currentPage = 1  // 默认当前为第一页
var pageCount = 0 // 分了多少页
var limit = 2 // 每页多少条
var pagingArr = [
    { id: 1, name: '2条/页', size: 2 },
    { id: 2, name: '4条/页', size: 4 }
]



// 获取 pageCount
function getPageCount() {
    var fenyeId = document.getElementById('fenye').value

    limit = pagingArr.filter(item => item.id === JSON.parse(fenyeId))[0].size
    pageCount = Math.ceil(total/limit)
}

// 点击切换每页显示多少条
function handleChangePage(e) {
    var fenyeId = e.target.value

    for(var i = 0; i < pagingArr.length; i++) {
        if(JSON.parse(fenyeId) === pagingArr[i].id) {
            limit = pagingArr[i].size
        }
    }

    initPage()
    initYema()
}

// 跳页回车事件监听
function handleEnter(e) {
    var pageInput = document.getElementById('pageInput').value

    if (e.keyCode === 13) {
        currentPage = JSON.parse(pageInput)
        initPage()
        initYema()
    }
}

// 初始化界面
function initPage() {
    var html = ``
    for(var i = 0; i < listArr.length; i++){
        listArr[i].id = i + 1
        if(i >= (currentPage-1) * limit && i < currentPage * limit) {
            html += `
            <div class="article" style="margin-top: ${i === (currentPage-1)*limit ? 0 : "20px"}">
                <h4>${listArr[i].title + ' ' + listArr[i].id}</h4>

                <div class="author">
                    <span class="mar-r-20">作者：${listArr[i].author}</span>
                    <span class="mar-r-20">创建时间：${listArr[i].createTime}</span>
                    <span class="mar-r-20">阅读：${listArr[i].readCount}</span>
                    <span>评论：${listArr[i].commentCount}</span>
                </div>
                ${listArr[i].content}
                <div class="flex bg-50a5ff color-white w-px-80 font-12 align-center justify-center pad-y-5 bor-radius-3 mar-t-20">
                    <img src="./images/icon_005.png" class="w-px-14 mar-r-2"/>
                    <span>阅读全文</span>
                </div>
            </div>`
        }
    }

    var listDom = document.getElementById('list')
    listDom.innerHTML = html
}

// 初始化分页
function initPaging() {
    var pagingDom = document.getElementById('fenye')
    for(var i = 0; i < pagingArr.length; i++){
        // 创建一个新的对象，将option内容添加进去
        var newOption = new Option(`${pagingArr[i].name}`,`${pagingArr[i].id}`)
        pagingDom.add(newOption)
    }
}

// 初始化页码
function initYema() {
    getPageCount()
    var pagingDom = document.getElementById('fenye')
    var yemaHtml = ``
    var leftArrow = ``
    var rightArrow = ``
    for(var i = 0; i < pageCount; i++){
        yemaHtml += `
            <div 
                class="flex align-center justify-center color-333333 mar-r-5 cursor-pointer"
                style="width: 40px; height: 20px; background: ${currentPage===i+1 ? '#1e9fff' : '#cccccc'}; color: ${currentPage===i+1 ? '#ffffff' : '#333333'};"
                onclick="handleClickYema(${i+1})"
            >
                ${i+1}
            </div>
        `

        if (i === 0) {
            leftArrow = `<span class="mar-r-5" style="color: ${ currentPage === 1 ? '#cccccc' : '#333333'};" onclick="handlePager('prev')">&lt;</span>`
        }

        if (i === pageCount - 1) {
            rightArrow = `<span style="color: ${ currentPage === pageCount ? '#cccccc' : '#333333'};" onclick="handlePager('next')">&gt;</span>`
        }
    }
    
    var yemaDom = document.getElementById('yema')
    yemaDom.innerHTML = leftArrow + yemaHtml + rightArrow
}

// 点击页码
function handleClickYema(index) {
    currentPage = index
    initPage()
    initYema()
}

// 切换上下页
function handlePager(type) {
    if(type === 'prev') {
        if(currentPage === 1) return
        currentPage -= 1
        initPage()
        initYema()
    }
    if(type === 'next') {
        if(currentPage === pageCount) return
        currentPage += 1
        initPage()
        initYema()
    }
}


// 初始化
window.onload = function() {
    initPage()
    document.getElementById('total').innerText = total
    initPaging()
    initYema()
    getPageCount()
}


